import React, { useState } from 'react';
import { Card, Tabs, Form, Input, Button, Switch, Select, Radio, message, Typography } from 'antd';
import { SaveOutlined } from '@ant-design/icons';
import './style.less';

const { Title } = Typography;
const { TabPane } = Tabs;
const { Option } = Select;

interface GeneralSettings {
  siteName: string;
  siteDescription: string;
  adminEmail: string;
  itemsPerPage: number;
  enableNotifications: boolean;
  language: string;
  theme: string;
}

interface SecuritySettings {
  enableTwoFactor: boolean;
  sessionTimeout: number;
  passwordExpiry: number;
  minimumPasswordLength: number;
  requireSpecialChars: boolean;
}

const Settings: React.FC = () => {
  const [generalForm] = Form.useForm();
  const [securityForm] = Form.useForm();
  const [loading, setLoading] = useState(false);

  // 模拟初始数据
  const initialGeneralSettings: GeneralSettings = {
    siteName: '后台管理系统',
    siteDescription: '一个功能强大的后台管理系统',
    adminEmail: 'admin@example.com',
    itemsPerPage: 10,
    enableNotifications: true,
    language: 'zh_CN',
    theme: 'light',
  };

  const initialSecuritySettings: SecuritySettings = {
    enableTwoFactor: false,
    sessionTimeout: 30,
    passwordExpiry: 90,
    minimumPasswordLength: 8,
    requireSpecialChars: true,
  };

  const handleGeneralSubmit = (values: GeneralSettings) => {
    setLoading(true);
    // 模拟API调用
    setTimeout(() => {
      console.log('保存通用设置:', values);
      message.success('通用设置已保存');
      setLoading(false);
    }, 1000);
  };

  const handleSecuritySubmit = (values: SecuritySettings) => {
    setLoading(true);
    // 模拟API调用
    setTimeout(() => {
      console.log('保存安全设置:', values);
      message.success('安全设置已保存');
      setLoading(false);
    }, 1000);
  };

  return (
    <div className="settings-container">
      <Title level={4} className="page-title">系统设置</Title>
      
      <Card className="settings-card">
        <Tabs defaultActiveKey="general">
          <TabPane tab="通用设置" key="general">
            <Form
              form={generalForm}
              layout="vertical"
              initialValues={initialGeneralSettings}
              onFinish={handleGeneralSubmit}
            >
              <Form.Item
                label="站点名称"
                name="siteName"
                rules={[{ required: true, message: '请输入站点名称' }]}
              >
                <Input />
              </Form.Item>
              
              <Form.Item
                label="站点描述"
                name="siteDescription"
              >
                <Input.TextArea rows={3} />
              </Form.Item>
              
              <Form.Item
                label="管理员邮箱"
                name="adminEmail"
                rules={[
                  { required: true, message: '请输入管理员邮箱' },
                  { type: 'email', message: '请输入有效的邮箱地址' }
                ]}
              >
                <Input />
              </Form.Item>
              
              <Form.Item
                label="每页显示条目数"
                name="itemsPerPage"
                rules={[{ required: true, message: '请选择每页显示条目数' }]}
              >
                <Select>
                  <Option value={10}>10</Option>
                  <Option value={20}>20</Option>
                  <Option value={30}>30</Option>
                  <Option value={50}>50</Option>
                  <Option value={100}>100</Option>
                </Select>
              </Form.Item>
              
              <Form.Item
                label="启用通知"
                name="enableNotifications"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
              
              <Form.Item
                label="语言"
                name="language"
                rules={[{ required: true, message: '请选择语言' }]}
              >
                <Select>
                  <Option value="zh_CN">简体中文</Option>
                  <Option value="en_US">English (US)</Option>
                  <Option value="ja_JP">日本語</Option>
                </Select>
              </Form.Item>
              
              <Form.Item
                label="主题"
                name="theme"
                rules={[{ required: true, message: '请选择主题' }]}
              >
                <Radio.Group>
                  <Radio value="light">浅色</Radio>
                  <Radio value="dark">深色</Radio>
                  <Radio value="auto">自动（跟随系统）</Radio>
                </Radio.Group>
              </Form.Item>
              
              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  icon={<SaveOutlined />}
                  loading={loading}
                >
                  保存设置
                </Button>
              </Form.Item>
            </Form>
          </TabPane>
          
          <TabPane tab="安全设置" key="security">
            <Form
              form={securityForm}
              layout="vertical"
              initialValues={initialSecuritySettings}
              onFinish={handleSecuritySubmit}
            >
              <Form.Item
                label="启用两步验证"
                name="enableTwoFactor"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
              
              <Form.Item
                label="会话超时时间（分钟）"
                name="sessionTimeout"
                rules={[{ required: true, message: '请输入会话超时时间' }]}
              >
                <Select>
                  <Option value={15}>15分钟</Option>
                  <Option value={30}>30分钟</Option>
                  <Option value={60}>1小时</Option>
                  <Option value={120}>2小时</Option>
                  <Option value={240}>4小时</Option>
                </Select>
              </Form.Item>
              
              <Form.Item
                label="密码过期时间（天）"
                name="passwordExpiry"
                rules={[{ required: true, message: '请输入密码过期时间' }]}
              >
                <Select>
                  <Option value={30}>30天</Option>
                  <Option value={60}>60天</Option>
                  <Option value={90}>90天</Option>
                  <Option value={180}>180天</Option>
                  <Option value={365}>365天</Option>
                  <Option value={0}>永不过期</Option>
                </Select>
              </Form.Item>
              
              <Form.Item
                label="最小密码长度"
                name="minimumPasswordLength"
                rules={[{ required: true, message: '请选择最小密码长度' }]}
              >
                <Select>
                  <Option value={6}>6个字符</Option>
                  <Option value={8}>8个字符</Option>
                  <Option value={10}>10个字符</Option>
                  <Option value={12}>12个字符</Option>
                  <Option value={16}>16个字符</Option>
                </Select>
              </Form.Item>
              
              <Form.Item
                label="要求特殊字符"
                name="requireSpecialChars"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
              
              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  icon={<SaveOutlined />}
                  loading={loading}
                >
                  保存设置
                </Button>
              </Form.Item>
            </Form>
          </TabPane>
        </Tabs>
      </Card>
    </div>
  );
};

export default Settings;